import React, {Component} from 'react';
import PropTypes from "prop-types";
import {View} from 'react-native';
import Label from '../label/index';
import Color from '../../config/theme/standard/color.js';
import Fonts from '../../config/theme/standard/fonts.js';
export default class Counter extends Component {
    constructor(props){
        super(props)
        this.state = {
            initVal:props.initVal
        };
    }

    componentWillUnmount(){
        let that=this;
        that.counterTimer&& clearInterval(that.counterTimer)
    }

    startTime=()=>{
        let {isReciprocal,endVal,stepVal,time,counterStyle,startEvent,endEvent}=this.props;
        let {initVal}=this.state;
        let that=this;
        this.counterTimer&& clearInterval(this.counterTimer);
        if(isReciprocal){
            this.counterTimer=setInterval(function(){
                if(initVal>endVal){
                    that.setState({initVal:initVal-stepVal});
                    if(startEvent){
                        startEvent()
                    };
                }else if(initVal==endVal){
                    if(endEvent){
                        endEvent()
                    };
                    that.counterTimer&& clearInterval(that.counterTimer);
                };
            },time)
        }else{
            this.counterTimer=setInterval(function(){
                if(initVal<endVal){
                    that.setState({initVal:initVal+stepVal});
                    if(startEvent){
                        startEvent()
                    };
                }else if(initVal>=endVal){
                    if(endEvent){
                        endEvent()
                    };
                    that.counterTimer&& clearInterval(that.counterTimer);
                };
            },time)
        }
        ;
        return <Label labelStyle={[{color:Color.counter.text,fontSize:Fonts.counter.textFontSize},counterStyle]}  text={initVal} />
    }

    render() {
        let width=this.props.width;
        return (
            <View style={{alignItems:'center',width:width,flexDirection: 'row', justifyContent: 'center'}}>
                {this.startTime()}
                <Label labelStyle={[{color: Color.counter.text, fontSize:Fonts.counter.textFontSize}, this.props.counterStyle]} text={this.props.unit} />
            </View>
        );
    }
}
Counter.propTypes={
    //是否是倒数
    isReciprocal:PropTypes.bool,
    //初始值
    initVal:PropTypes.number,
    //终止值
    endVal:PropTypes.number,
    //步进值
    stepVal:PropTypes.number,
    //默认时长
    time:PropTypes.number,
    //开始时的回调函数
    startEvent:PropTypes.func,
    //计数结束时的回调函数
    endEvent:PropTypes.func,
    //容器的宽度
    width:PropTypes.number,
    //计数的样式
    counterStyle:PropTypes.object,
     //计数单位
     unit: PropTypes.string

}
Counter.defaultProps={
    //是否是倒数
    isReciprocal:false,
    //初始值
    initVal:0,
    //步进值
    stepVal:1,
    //默认时长
    time:2000,
    //容器的宽度
    width:50,
    //计数单位
    unit:''
}

